<template>
	<view class="apps">
		<uv-navbar placeholder>
			<template v-slot:left>
				<view class="flex aic">
					<view class="flex jcc bdr100 bd1s bdb1 bdl1 bdr1 bdt1" >
						<uv-icon name="home" size="19" @click="handleIndex()"></uv-icon>
					</view>
					<view class="f16 fw600 ml20">场地</view>
					<view class="f14 fw400 ml20" @click="handle('/pages/facility/device',0)">设备</view>
					<view class="f14 fw400 ml20" @click="handle('/pages/facility/service',0)">服务</view>
				</view>
			</template>
		</uv-navbar>
		
		<uv-sticky bgColor="#fff">
			<view class="ptb10">
				<uv-tabs :list="categorys" lineWidth="30" @click="handleTabs" keyName="cate_name"
				lineColor="#f5c185" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px',
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize:'14px',
				}" 
				itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 60rpx;font-size:14px;">
					
				</uv-tabs>
				<view class="flex ptb10 plr10 aic">
					<view class="f14 c333 fw600">标签：</view>
					<view :class=" arrs.cost =='free'?`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 bdf5 cf5a957 mr10 f22r`:`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 c999 mr10 f22r` " @click="cost('free')">公益免费</view>
					<view :class=" arrs.cost =='payied'?`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 bdf5 cf5a957 mr10 f22r`:`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 c999 mr10 f22r` " @click="cost('payied')">收费</view>
					<view :class=" arrs.type =='opt0'?`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 bdf5 cf5a957 mr10 f22r`:`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 c999 mr10 f22r` " @click="tabType('opt0')">演练场地</view>
					<view :class=" arrs.type =='opt1'?`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 bdf5 cf5a957 f22r`:`bdr15 bdl1 bdt1 bdr1 bdb1 ptb10 plr10 c999 f22r` " @click="tabType('opt1')">活动场地</view>
				</view>
			</view>
		</uv-sticky>
		<view class="mt20 plr10">
			<uv-grid :border="false" col="2" v-if="list.length > 0">
				<uv-grid-item v-for="(item,index) in list" :key="index">
					<view class="flex fdc mb20 pr plr10">
						<image :src="item.image" mode="widthFix" style="width: 345rpx; height:240rpx;"></image>
						<view class="bgwhite t2hd f26r c333">{{item.title}}</view>
						<view class="flex jcsb">
							<uv-button open-type="contact" @contact="contactBack" customStyle="height:auto;border-width:0 !important;">
								<view class="flex fdc">
									<view class="mt10  flex jcc f26r cf5a957">咨询客服</view>
								</view>
							</uv-button>
							<view class="flex fdc">
								<view class="mt10 flex jcc f26r c35b5f5">申请使用</view>
							</view>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script setup>
	import { util } from '@/common/util.js'
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide,onReachBottom } from '@dcloudio/uni-app'
	const categorys=ref([{cate_name:'全部类型',cate_id:0}]),list =ref([]),page=ref(1),more=ref(true)
	let arrs = reactive({
		page:1,
		cate_id:0,
		cost:"",
		type:"",
		more:true,
	})
	const handle=(e)=>{
		uni.navigateTo({
			url:e,
		})
	},handleBack = ()=>{
		uni.navigateBack()
	},handleIndex = ()=>{
		uni.switchTab({
			url:"/pages/index/index"
		})
	},handleTabs = (e) =>{
		arrs = Object.assign(arrs,e);
		arrs.page = 1;
		arrs.more = true;
		getList()
		
	},cost= (e)=>{
		if(arrs.cost == e){
			arrs.cost = ""
		}else{
			arrs.cost = e
		}
		arrs.page = 1;
		arrs.more = true;
		getList()
	},tabType = (e) =>{
		if(arrs.type == e){
			arrs.type = ""
		}else{
			arrs.type = e
		}
		arrs.page = 1;
		arrs.more = true;
		getList()
	},getCategory = () =>{
		util.request({url:'/facility/category',type:'get'}).then((rlt) =>{
			categorys.value.push(...rlt.data);
			console.log(categorys.value);
		})
	},getList = ()=>{
		util.request({url:"/facility/facility",type:"post",data:arrs}).then((rlt)=>{
			if(rlt.code == 1){
				if(arrs.page == 1){
					list.value =rlt.data
				}else{
					list.value.push(... rlt.data);
				}
				if(rlt.data.length<10){
					arrs.more=false
				}
				arrs.page++;
			}
		})
	},contactBack = (e)=>{
		console.log(e);
	}
	
	onLoad(()=>{
		getCategory(),getList()
	})
	onReachBottom(()=>{
		if(arrs.more){
			getList()
		}
	})
</script>

<style>
	       
</style>
